.edit-guide-app {
  margin: 2rem 0 4rem;

  small.error {
    margin-bottom: 0;
  }

  h1 {
    cursor: pointer;
  }

  h1.has-tip, h1.has-tip:hover {
    border-bottom: none;
    color: inherit;
  }

  .crop-image {
    cursor: pointer;
    color: $secondary-color;

    &.ng-invalid-uploading {
      p.loading{
        display: block;
      }
      p.to-upload {
        display: none;
      }
    }

    .wrapper {
      height: 100%;
      position: relative;
      overflow: hidden;
      .leaf-placeholder{
        transform: translate(0%, -30%);
        margin: auto;
        top: 0; bottom: 0; right: 0; left: 0;
        position: absolute;
        height: 3rem;
        width: 3rem;
        font-size: 3rem;
      }
    }
    p{
      bottom: 0;
      position: absolute;
      text-align: center;
      width: 100%;
    }
    .loading {
      display: none;
    }
    a{
      bottom: 0;
      left: 0;
      position: absolute;
      margin-bottom: -2rem;
    }
  }



  input[type=text].hidden-edit-field {
    font-size: 2rem;
    height: 3.5rem;
  }

  p.section-text {
    margin-top: 1rem;
  }


  .edit-guide-app .box, .show-guide-app .box {
    padding: 1.5rem 0;
    margin-top: 0;
  }

  /****
  *
  * $BASIC NEEDS
  *
  ****/

  .basic-needs {
    .actual-basic-needs {
      @include columns(2);
    }
  }

  .basic-need {
    border-radius: 3px;
    background: #EFF1F4;
    border: 1px solid #E7E8EB;
    width: 90%;
    padding: 0 1rem;
    margin: 0 1rem;
    display: inline-block;
    opacity: .5;
    /*transition: .2s;*/

    &.active {
      background-color: scale-color($of-green, $lightness: 35%);
      /*background-color: $of-green;*/
      opacity: 1;

      &:hover{
        opacity: 1;
      }
    }

    .title {
      margin: 0;
      font-size: .9rem;
      margin-top: .5rem;
    }

    &:hover {
      opacity: .7;
    }

    input[type=range] {
      width: 66%;
      margin: .7rem 1rem 0 0;
    }

    input[type=checkbox] {
      margin: 0 .2rem .8rem -.5rem
    }

    .columns {
      /*padding: .5rem inherit;*/
    }

    .choices select {
      display: inline-block;
      /*width: 35%;*/
      background-color: inherit;
      cursor: pointer;
      /*margin-top: .1rem;*/
      margin-bottom: 0;
    }
  }

  .row.basic-needs-results {
    text-align: center;
    margin-top: 1rem;
  }

  /****
  *
  * $STAGES
  *
  ****/


  .tabs {
    dd a {
      /*padding: .5rem 1rem;*/
    }
    h3 {
      font-size: .8rem;
    }
  }

  .stage-description {
    padding: 0 2rem;
  }


  /*

  $SIZES

  */
  @media only screen and (max-width: 40.063em) {
    .basic-needs .actual-basic-needs {
      @include columns(1);
    }
  }
}
